<template>
  <div class="app-container fullscreen">
    <map-gis v-if="!abroad" @init="mapInit" />
    <map-gis-abroad v-else @init="mapInit" />
    <el-input v-model="searchText" class="search" placeholder="姓名 / 机器码" prefix-icon="el-icon-search" />
    <device-status />
    <el-button @click="onSwitch">海内/外切换</el-button>
  </div>
</template>

<script>
import DeviceStatus from '@/components/DeviceStatus'
import MapGis from '@/components/MapGis'
import MapGisAbroad from '@/components/MapGisAbroad'

export default {
  components: {
    MapGis,
    MapGisAbroad,
    DeviceStatus
  },
  data() {
    return {
      searchText: '',
      abroad: new URLSearchParams(location.search).has('abroad')
    }
  },
  methods: {
    mapInit(AMap, map) {
      const { Marker } = AMap
      const total = new Marker({
        map,
        position: [120.800648, 31.242811],
        icon: require('./marker.svg'),
        label: {
          content: '2',
          offset: [-24, 0]
        },
        title: '2台农机',
        clickable: true
      })
      total.on('click', () => map.setZoomAndCenter(16, [120.805276, 31.243249]))
      const icon = require('../DigitalMap/tractor.svg')
      const m1 = new Marker({
        map,
        position: [120.800648, 31.242811],
        icon,
        title: '农机1',
        visible: false
      })
      const m2 = new Marker({
        map,
        position: [120.80258, 31.246553],
        icon,
        title: '农机2',
        visible: false
      })
      map.on('zoomend', ({ target }) => {
        if (target.getZoom() > 11) {
          m1.show()
          m2.show()
          total.hide()
        } else {
          m1.hide()
          m2.hide()
          total.show()
        }
      })
    },
    onSwitch() {
      if (this.abroad) {
        location.search = ''
      } else {
        location.search = '?abroad'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  width: 100%;
  height: 100%;
  position: relative;
  padding: 0;

  .search {
    position: absolute;
    right: 16px;
    top: 16px;
    width: 200px;
  }

  .el-button {
    position: absolute;
    right: 16px;
    bottom: 16px;
  }
}
</style>
